Tutorial: 06 - Click to Sign

In certain application contexts you may want to use the EasyScript library in an environment where you're also looking to capture form input. The EasyScript event handler provided by addSignatureListener can absorb keyboard events which may prevent certain characters from being displayed in form fields if the listener is added to the document body.

This problem can be worked around by making a canvas element "click-to-sign" and then attaching the signature listener to that element instead. This can also be done with pop-up modals.

To achieve this effect first set the taborder on the canvas element being used for the signature:

<canvas id="signature" taborder="-1"></canvas>

Now clicking the canvas element will generate a "focus" event and moving away from the canvas will generate a "blur" event. You can style the form accordingly by using the following CSS:

<style type="text/css">
    #signature {
        border: 1px solid black;
    }
    #signature:focus {
        border: 2px solid blue;
    }
</style>

Now you can add the following JavaScript:

//State
var signatureComplete = false;
var prevPoint;

//Initializing the canvas and EasyScript.
var canvas = document.getElementById("signature");
var easyScript = new ScriptelEasyScript();
easyScript.addSignatureListener(canvas);

//Register a streaming callback.
easyScript.registerStreamingCallback(function(e) {
    switch (e.type) {
        case "ScriptelSignatureMetaData":
            signatureComplete = false;
            clearCanvas(canvas);
            break;
        case "ScriptelNewStroke":
            prevPoint = null;
            break;
        case "ScriptelCoordinate":
            if (prevPoint != null) {
                easyScript.drawSegmentOnCanvas(prevPoint, e, canvas, { "strokeStyle": "black", "lineWidth": 2 });
            }
            prevPoint = e;
            break;
        case "ScriptelCancelSignature":
            clearCanvas(canvas);
            prevPoint = null;
            break;
        case "ScriptelSignatureComplete":
            signatureComplete = true;
            break;
    }
});

//This happens when the element gets focus. Clears the display if the
//signature isn't already complete.
canvas.addEventListener("focus", function(evt) {
    if(!signatureComplete) {
        clearCanvas(canvas);
    }
}, false);

//This happens when the element loses focus. Clears the display and shows
//the click to sign message if the signature isn't complete yet.
canvas.addEventListener("blur", function(evt) {
    drawClickToSign(canvas);
    prevPoint = null;
}, false);

//This clears the canvas and fills it with white.
function clearCanvas(canvas) {
    //Get the graphics context of the canvas.
    var ctx = canvas.getContext("2d");
    //Set the fill
    ctx.fillStyle = "white";
    //Clear the canvas and fill with the background color:
    ctx.fillRect(0,0,canvas.width,canvas.height);
}

//This draws a click to sign message.
function drawClickToSign(canvas) {
    if(!signatureComplete) {
        //Get the graphics context of the canvas.
        var ctx = canvas.getContext("2d");
        //Set the fill
        ctx.fillStyle = "#E0E0E0";
        //Clear the canvas and fill with the background color:
        ctx.fillRect(0,0,canvas.width,canvas.height);
        //Set the Font Parameters
        ctx.font = "48px 'Calibri', 'Tahoma', san-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "black";
        //Fill the text
        ctx.fillText("Click to Sign", canvas.width / 2, canvas.height / 2);
    }
}

At this point you should be able to click the signature box, it'll indicate that you should sign, and then you can sign and move to other form elements without worrying that the EasyScript event listener will quietly steal away keyboard events. Check out the click-to-sign.html example in the API package for a full working example.